<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="类型" prop="permissionType">
                <el-radio-group v-model="ruleForm.permissionType" @change="changeradio" :disabled="!isAdd">
                    <el-radio label="0" size="large">菜单</el-radio>
                    <el-radio label="1" size="large">权限</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="菜单级别" prop="type" v-if="ruleForm.permissionType == 0">
                <el-select v-model="ruleForm.type" placeholder="请选择" @change="changeselect" :disabled="!isAdd">
                    <el-option label="一级" :value="0" />
                    <el-option label="二级" :value="1" />
                    <el-option label="三级" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="父级菜单" v-if="ruleForm.type != 0 || ruleForm.permissionType == 1" prop="parentId">
                <el-select v-model="ruleForm.parentId" placeholder="请选择" :disabled="!isAdd">
                    <el-option :label="item.name" :value="item.id" v-for="(item, index) in roles" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="菜单编码" prop="code" v-if="ruleForm.permissionType == 1">
                <el-input v-model="ruleForm.code" placeholder="请输入" :disabled="!isAdd" />
            </el-form-item>
            <el-form-item label="菜单编码" prop="url" v-if="ruleForm.permissionType == 0">
                <el-input v-model="ruleForm.url" placeholder="请输入" :disabled="!isAdd" />
            </el-form-item>
            <el-form-item label="描述" prop="remarks">
                <el-input v-model="ruleForm.remarks" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input v-model="ruleForm.icon" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0"
                    :inactive-value="1" />
            </el-form-item>
            <el-form-item label="是否为最小级" v-if="ruleForm.permissionType == '0'" prop="isNotLast">
                <el-radio-group v-model="ruleForm.isNotLast" @change="changeradio1" :disabled="!isAdd">
                    <el-radio label="0" size="large">是</el-radio>
                    <el-radio label="1" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="路径" v-if="ruleForm.isNotLast == '0' && ruleForm.permissionType == '0'"
                prop="component">
                <el-input v-model="ruleForm.component" placeholder="请输入" :disabled="!isAdd" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { addPermissionInfo, addPermissionParentList, updatePermissionInfo } from '@/api/permission.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import store from '@/store/';

const props = defineProps({
    isAdd: {
        type: Boolean,
        default: false, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    name: '',
    remarks: '',
    code: '',
    status: 0,
    loginId: '',
    icon: '',
    parentId: '',
    sort: '',
    component: '',
    type: 0,
    url: '',
    permissionType: '0',
    isNotLast: '1',
})
const rules = reactive({
    name: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在20个字以内', trigger: 'blur' },
    ],
    remarks: [
        { required: true, message: '请输入描述', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入角色编码', trigger: 'blur' },
    ],
    url: [
        { required: true, message: '请输入角色编码', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    icon: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    parentId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    sort: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    component: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    permissionType: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    isNotLast: [
        { required: true, message: '请选择', trigger: 'change' },
    ],

})

const roles = reactive([])
// 是否为最小级
const changeradio1 = (value) => {
    ruleForm.isNotLast.value = value
}
// 下拉框选择
const changeselect = (val) => {
    ruleForm.type = val;
    roles.length = 0;
    addPermissionParentList(ruleForm.type, ruleForm.permissionType).then(res => {
        if (res.code == 200) {
            if (res.data != null) {

                roles.push(...res.data)
            }
        }
    })
}
// 单选框
const changeradio = (val) => {
    ruleForm.permissionType = val;
    roles.length = 0;
    addPermissionParentList(-1, ruleForm.permissionType).then(res => {
        if (res.code == 200) {
            if (res.data != null) {
                roles.push(...res.data)
            }
        }
    })

}
// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.loginId = JSON.parse(localStorage.getItem('userInfo')).data.id
            if (props.isAdd) {
                if(ruleForm.permissionType == '1'){
                    ruleForm.type = null
                }
                addPermissionInfo(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                        store.dispatch('GetMenu')
                    }
                })
            } else {
                updatePermissionInfo({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                        store.dispatch('GetMenu')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = () => {
    emit('closeAdd')
}


onMounted(() => {
    if (!props.isAdd) {
        ruleForm.name = props.row.name;
        ruleForm.code = props.row.code;
        ruleForm.status = props.row.status;
        ruleForm.remarks = props.row.remarks;
        ruleForm.icon = props.row.icon;
        ruleForm.sort = props.row.sort;
        ruleForm.type = props.row.type;
        ruleForm.parentId = props.row.parentId;
        ruleForm.component = props.row.component;
        ruleForm.url = props.row.url;
        ruleForm.permissionType = props.row.permissionType;
        ruleForm.isNotLast = props.row.isNotLast;
        changeselect(ruleForm.type)
    }
})

</script>

<style lang="scss" scoped></style>